@(knownHost: uk.bl.monitrix.model.KnownHost, crawlLog: uk.bl.monitrix.model.CrawlLog, alertLog: uk.bl.monitrix.model.AlertLog)

@import tags.{heritrixStatus, navbar, alertTag}

@main("Monitrix - Host Information") {
  @navbar("/hosts/info")
}{
  @defining(crawlLog.countEntriesForHost(knownHost.getHostname())) { totalURLs =>
    <h1 style="padding:0px 0px 10px 5px;">
      @knownHost.getHostname() 
      <span class="pull-right">@totalURLs <span class="monitrix-h1-subline">URLs Crawled</span></span>
    </h1>
    
    <table class="table monitrix-hostinfo">
      <tr>
        <td class="monitrix-hostinfo-label">First Accessed</td>
        <td>@{new Date(knownHost.getFirstAccess()).format("dd MMM yy, HH:mm")}</td>
        <td>(@uk.bl.monitrix.NumberFormat.since(knownHost.getFirstAccess()) ago)</td>
        <td style="width:50%"/>
      </tr>
      <tr>
        <td class="monitrix-hostinfo-label">Last Accessed</td>
        <td>@{new Date(knownHost.getLastAccess()).format("dd MMM yy, HH:mm")}</td>
        <td>(@uk.bl.monitrix.NumberFormat.since(knownHost.getLastAccess()) ago)</td>
        <td/>
      </tr>
      <tr>
        <td class="monitrix-hostinfo-label">Visit Duration</td>
        <td colspan="2">@uk.bl.monitrix.NumberFormat.formatDuration(knownHost.getLastAccess - knownHost.getFirstAccess)</td>
        <td style="width:50%"/>
      </tr>
      @if(totalURLs > 1) {
        <tr>
          <td class="monitrix-hostinfo-label">URL History</td>
          <td colspan="2">
            <div class="monitrix-barchart-container">
              <div class="monitrix-barchart-y-label-container-small">
                <span class="monitrix-barchart-y-label">Number of URLs</span>
              </div>
              <div class="monitrix-barchart-container-right">  
                <div class="monitrix-barchart-axis-area" id="graph-urls-axis"></div>             
                <div class="monitrix-barchart-chart-area rickshaw-graph graph-tumb-loading" id="graph-urls"></div>
                <div id="graph-urls-x-axis"></div>
                <div class="monitrix-barchart-x-label">Time</div>
              </div>
            </div>
          </td>
          <td style="width:50%" />
        </tr>
      }
    
      <tr>
        <td/>
        <td colspan="3">
          <div class="monitrix-host-piechart">
            <strong>Fetch Status</strong>
            <div class="monitrix-host-piechart-inner" id="pie-result-codes"></div>
            <div class="monitrix-host-pielchart-legend">
              <table class="table table-condensed table-striped">
                <thead>
                  <tr><th># URLs</th><th>Result</th><th>Code</th></tr>
                </thead>
                <tbody>
                  @for((code, value) <- knownHost.getFetchStatusDistribution().toSeq.sortWith(_._2 > _._2)) {
                    <tr><td>@value</td><td>@heritrixStatus(code)</td><td>@code</td></tr>
                  }
                </tbody>
              </table>
            </div>
          </div>
          
          <div class="monitrix-host-piechart">
            <strong>Content Types</strong>
            <div class="monitrix-host-piechart-inner" id="pie-mimetypes"></div>
            <div class="monitrix-host-pielchart-legend">
              <table class="table table-condensed table-striped">
                <thead>
                  <tr><th># URLs</th><th>MIME</th></tr>
                </thead>
                <tbody>
                  @for((mime, value) <- knownHost.getContentTypeDistribution().toSeq.sortWith(_._2 > _._2)) {
                    <tr><td>@value</td><td>
                    @if(mime.length > 20) {
                    <abbr title="@mime">...@mime.substring(mime.length()-24)</abbr>
                    } else {
                    @mime
                    }
                    </td></tr>
                  }
                </tbody>
              </table>
            </div>
          </div>
        
          <div class="monitrix-host-piechart">
            <strong>Virus Scan</strong>
            <div class="monitrix-host-piechart-inner" id="pie-viruscheck"></div>
            <div class="monitrix-host-pielchart-legend">
              <table class="table table-condensed table-striped">
                <thead>
                  <tr><th># URLs</th><th>Virus</th></tr>
                </thead>
                <tbody>
                  @defining(knownHost.getVirusStats()) { virusStats =>
                    @if(virusStats.size > 0) {
                      @for((virus, value) <- virusStats) {
                        <tr><td>@value</td><td>@virus</td></tr>
                      }
                    } else {
                      <tr><td style="text-align:center" colspan="2"><strong>No Virus Found</strong></td></tr>
                    }
                  }
                </tbody>
              </table>
            </div>
          </div>
        </td>
      </tr>
      <tr>
          <td class="monitrix-hostinfo-label">Domain</td>
          <td colspan="3" class="monitrix-three-column-text">
            @knownHost.getDomain
          </td>
      </tr>
      @if( knownHost.getSubdomain != null) {
      <tr>
          <td class="monitrix-hostinfo-label">Subdomain</td>
          <td colspan="3" class="monitrix-three-column-text">
            @knownHost.getSubdomain.@knownHost.getDomain
          </td>
      </tr>
      }
      @defining(knownHost.getCrawlerIDs().sorted) { crawlers =>
        <tr><td class="monitrix-hostinfo-label">Crawlers (@crawlers.size())</td><td colspan="3">@crawlers.mkString(", ")</td></tr>
      }
      <tr>
        <td class="monitrix-hostinfo-label">Alerts</td>
        <td colspan="3">
          @for(alertType <- alertLog.getAlertTypesForHost(knownHost.getHostname)) {
            @alertTag(alertType)          
          }
        </td>
      </tr>
    </table>
  
    <script src="@routes.Assets.at("javascripts/raphael-min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/morris.min.js")" type="text/javascript"></script>
    <script>
      window.onload = function() {
          Morris.Donut({
                       data: [
                               @Html({knownHost.getFetchStatusDistribution().map { case (code, value) =>
   		                          "{'label':'" + code + "','value':" + value + "}" 
                                }.mkString(", ") })
                             ],
                       element: 'pie-result-codes',
                       colors: ['#BD4E4E', '#B71717', '#850303', '#E38B8B']
    	             });
          
          Morris.Donut({
              data: [
                      @Html({knownHost.getContentTypeDistribution().map { case (mime, count) =>
                         "{'label':'" + mime.replace("'", "\"") + "','value':" + count  + "}" 
                       }.mkString(", ") })
                    ],
              element: 'pie-mimetypes',
              colors: ['#BD4E4E', '#B71717', '#850303', '#E38B8B']
            });
          
    	  Morris.Donut({
                       data: [
                              @defining(knownHost.getVirusStats()) { virusStats =>
                                @if(virusStats.size > 0) {
                                  @Html({virusStats.map { case (name, count) =>
                                    "{'label':'" + name + "','value':" + count  + "}" 
                                  }.mkString(", ") })
                                } else {
                             	  { 'label': 'Clean', 'value': @totalURLs }
                                }
                              }
                             ],
                       element: 'pie-viruscheck',
                       colors: ['#BD4E4E', '#B71717', '#850303', '#E38B8B']
    	             });
      }
    </script>
    <script>
    function loadGraph(url, divId, name, color, opt_show_hover_detail, opt_total_callback) {
      $.getJSON(url, function(data) {
        if (data.hasOwnProperty('progress')) {
         $('#' + divId).html('<span class="load-progress">' + data.progress + '%</span>');
         
         setTimeout(function() {
             loadGraph(url, divId, name, color, opt_show_hover_detail, opt_total_callback);        	 
         }, 1000);
        } else {
          $('#' + divId).html('');
          var total = 0;
          var graph = new Rickshaw.Graph({
            element: document.querySelector('#' + divId), 
            renderer: 'line',
            interpolation: 'step-after',
            series: [{
              color: color,
              data: data,
              name: name
            }]
          });
          
          
          new Rickshaw.Graph.Axis.X({
        	  graph:graph,
        	  pixelsPerTick: 70,
        	  tickFormat: function(x) {
        		  var date = new Date(x);
        		  return date.getHours() + ":" + date.getMinutes(); 
        	  },
          });
          
          new Rickshaw.Graph.Axis.Y({
              graph: graph,
              tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
              element: document.getElementById(divId + '-axis')
          });
          
          if (opt_show_hover_detail) {
            new Rickshaw.Graph.HoverDetail({
              graph: graph,
              xFormatter: function(x) { return new Date(x) },
              yFormatter: function(y) { return y }
            });
          }
          
          $('#' + divId).removeClass('graph-tumb-loading');
          graph.render();
          
          if (opt_total_callback) {
            var total = 0;
            $.each(data, function(idx, value) {
              total += value.y;
            });      	  
            opt_total_callback(total);
          }
        }
      });    	
    }
    
    @if(totalURLs > 1) {
      loadGraph('/api/hosts/@knownHost.getHostname()/urls-crawled?maxpoints=100', 'graph-urls', 'URLs', '#c05020', true);
    }
  </script>
  }
}
